<template>
	<transition name="el-zoom-in-center">
		<div class="JNPF-preview-main">
			<div class="JNPF-common-page-header">
				<el-page-header @back="goBack" :content="!dataForm.id ? '新建' : isDetail ? '详情' : '编辑'"/>
				<div class="options">
					<el-button type="primary" @click="dataFormSubmit()" v-if="!isDetail">确 定</el-button>
					<el-button @click="goBack">取 消</el-button>
				</div>
			</div>
			<el-row :gutter="15"  class="main" :style="{margin: '0 auto',width:'100%'}">
			<el-form ref="elForm" :model="dataForm" size="medium" label-width="100px" label-position="right" :rules="rules">
				<el-col :span="24">
					<el-form-item label="安全目标指标" prop="aqmbzb" >
						<el-input v-model="dataForm.aqmbzb" placeholder="请输入" :disabled="!!isDisabled" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="目标指标编号" prop="mbzbbh" >
						<el-input v-model="dataForm.mbzbbh" placeholder="请输入" :disabled="!!isDisabled" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="周期类型" prop="nd" >
						<el-select v-model="dataForm.nd" placeholder="请选择" :disabled="!!isDisabled" clearable :style='{"width":"100%"}' >
							<el-option v-for="(item, index) in ndOptions" :key="index" :label="item.fullName" :value="item.id" ></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="指标值" prop="zbz" >
						<el-input v-model="dataForm.zbz" placeholder="请输入" :disabled="!!isDisabled" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="完成期限" prop="wcqx" >
						<el-date-picker v-model="dataForm.wcqx" placeholder="请选择" :disabled="!!isDisabled" clearable :style='{"width":"100%"}' type="date" format="yyyy-MM-dd" value-format="timestamp" >
						</el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="指标级别" prop="zbjb" >
						<el-select v-model="dataForm.zbjb" placeholder="请选择" :disabled="!!isDisabled" clearable :style='{"width":"100%"}' >
							<el-option v-for="(item, index) in zbjbOptions" :key="index" :label="item.fullName" :value="item.id" ></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="备注" prop="bz" >
						<el-input v-model="dataForm.bz" placeholder="请输入" :disabled="!!isDisabled" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="制定人部门" prop="zdbm" >
						<el-select v-model="dataForm.zdbm" placeholder="请选择" :disabled="!!isDisabled" clearable :style='{"width":"100%"}' filterable >
							<el-option v-for="(item, index) in zdbmOptions" :key="index" :label="item.F_FullName" :value="item.F_Id" ></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="制定日期" prop="zdrq" >
						<el-date-picker v-model="dataForm.zdrq" placeholder="请选择" :disabled="!!isDisabled" clearable :style='{"width":"100%"}' type="date" format="yyyy-MM-dd" value-format="timestamp" >
						</el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label-width="0">
						<div class="JNPF-common-title">
							<h2>指标分解</h2>
						</div>
							<el-table :data="dataForm.qyscAqmbzbfj" size='mini'>
								<el-table-column type="index" width="50" label="序号" align="center" />
								<el-table-column prop="zrbm" label="责任部门">
									<template slot-scope="scope">
										<el-select v-model="scope.row.zrbm" :style='{"width":"100%"}' clearable :disabled="!!isDetail">
											<el-option v-for="(item, index) in zrbmOptions" :key="index" :label="item.F_FullName" :value="item.F_Id" :disabled="item.disabled"></el-option>
										</el-select>
									</template>
								</el-table-column>
								<el-table-column prop="mbz" label="目标值">
									<template slot-scope="scope">
										<el-input v-model="scope.row.mbz" clearable :style='{"width":"100%"}' :disabled="!!isDetail"></el-input>
									</template>
								</el-table-column>
								<el-table-column prop="zbz" label="考核指标">
									<template slot-scope="scope">
										<el-input v-model="scope.row.zbz" clearable :style='{"width":"100%"}' :disabled="!!isDetail"></el-input>
									</template>
								</el-table-column>
								<el-table-column label="操作" width="50">
									<template slot-scope="scope">
										<el-button size="mini" type="text" class="JNPF-table-delBtn" @click="handleDelQyscAqmbzbfjEntityList(scope.$index)" :disabled="!!isDetail">删除</el-button>
									</template>
								</el-table-column>
							</el-table>
							<div class="table-actions" @click="addHandleQyscAqmbzbfjEntityList()">
								<el-button type="text" icon="el-icon-plus" :disabled="!!isDetail">新增</el-button>
							</div>
						</el-form-item>
					</el-col>
			</el-form>
			</el-row>
		</div>
	</transition>

</template>
<script>
import request from '@/utils/request'
import {getDictionaryDataSelector}from '@/api/systemData/dictionary'
import {previewDataInterface}from '@/api/systemData/dataInterface'
export default {
    data() {
      return {
        visible: false,
        isDetail: false,
        dataForm: {
					aqmbzb:undefined,
					mbzbbh:undefined,
					nd:undefined,
					zbz:undefined,
					wcqx:undefined,
					zbjb:undefined,
					bz:undefined,
					zdbm:undefined,
					zdrq:undefined,
					qyscAqmbzbfj : [],
        },
        rules: {

        },
				ndOptions:[{"fullName":"年度","id":"年度"},{"fullName":"季度","id":"季度"},{"fullName":"月度","id":"月度"}],
				zbjbOptions:[{"fullName":"公司级","id":"公司级"},{"fullName":"部门分厂级","id":"部门分厂级"},{"fullName":"工段班组级","id":"工段班组级"}],
				zdbmOptions:[],
				zrbmOptions:[],


      }
    },
    created() {
		this.getzdbmOptions();

    },
    methods: {
		getzdbmOptions()
		{
			previewDataInterface('772d2cbcadd24df79243e3d92ef5f690').then(res => {
				this.zdbmOptions = res.data
				this.zrbmOptions = res.data
			})
		},

           goBack() {
                    this.$emit('refresh')
                },
      init(id, isDetail, isDisabled) {
				this.dataForm.qyscAqmbzbfj =[];

        this.dataForm.id = id || 0;
        this.visible = true;
        this.isDetail = isDetail || false;
        this.isDisabled = isDisabled || false;
        this.$nextTick(() => {
          this.$refs['elForm'].resetFields();
          if (this.dataForm.id) {
            request({
              url: '/api/System/qyscAqmbzb/' + this.dataForm.id,
              method: 'get'
            }).then(res =>{
              this.dataForm = res.data;

            })
          }
        })
      },
      // 表单提交
      dataFormSubmit() {
		if(this.dataForm.qyscAqmbzbfj.length > 0){
			for(let i in this.dataForm.qyscAqmbzbfj){
				this.dataForm.qyscAqmbzbfj[i].nd = this.dataForm.nd;
				this.dataForm.qyscAqmbzbfj[i].mbzbbh = this.dataForm.mbzbbh;
				this.dataForm.qyscAqmbzbfj[i].zdrbm = this.dataForm.zdbm;
				this.dataForm.qyscAqmbzbfj[i].zdrq = this.dataForm.zdrq;
			}
		}
        this.$refs['elForm'].validate((valid) => {
          if (valid) {
            if (!this.dataForm.id) {
              request({
                url: '/api/System/qyscAqmbzb',
                method: 'post',
                data: this.dataForm,
              }).then((res) =>{
                this.$message({
                  message: res.msg,
                  type: 'success',
                  duration: 1000,
                  onClose: () =>{
                    this.visible = false;
                    this.$emit('refresh', true);
                  }
                })
              })
            } else {
              request({
                url: '/api/System/qyscAqmbzb/' + this.dataForm.id,
                method: 'PUT',
                data: this.dataForm
              }).then((res) =>{
                this.$message({
                  message: res.msg,
                  type: 'success',
                  duration: 1000,
                  onClose: () =>{
                    this.visible = false;
                    this.$emit('refresh', true);
                  }
                })
              })
            }
          }
        })
      },
			addHandleQyscAqmbzbfjEntityList() {
				let item = {
					Zrbm: undefined,
					Mbz: undefined,
					Zbz: undefined,
				}
				this.dataForm.qyscAqmbzbfj.push(item)
			},
			handleDelQyscAqmbzbfjEntityList(index) {
				this.dataForm.qyscAqmbzbfj.splice(index, 1);
			},

    }
  }
  </script>